import React, { Component } from 'react'
import * as echarts from '@COMPONENTS/ec-canvas/echarts.min'
import { getEchartOption } from '@UTILS/echartUtil'
import './Echarts.scss'

function initChart(option, showId) {
  const el = document.getElementById(`echarts_${showId}`)
  const chart = echarts.init(el)
  chart.setOption(option)
  chart.resize()
  return chart
}

export default class Echarts extends Component {
  componentDidMount() {
    const { showId } = this.props
    initChart(this.getOption(), showId)
  }

  componentDidUpdate() {
    const { showId } = this.props
    initChart(this.getOption(showId), showId)
  }

  getOption = () => {
    const option = getEchartOption(this.props)
    return option
  }

  render() {
    // showId 解决H5 切换tab时，echarts不显示
    const { showId, width, style: styleProps } = this.props
    const style = styleProps || { height: '176px' }
    // const style = styleProps || { width: `${width || 340}px`, height: '176px' }
    return (
      // eslint-disable-next-line react/forbid-elements
      <div id={`echarts_${showId}`} style={style} />
    )
  }
}

